<template>
	<view class="root">
		<view class="head">
			<view class="userinfo">
				<view class="avatar">
					<!-- md，注意图片路径写对啊 -->
					<image :src="item.user.avatar ? item.user.avatar: '../../static/image/user-default.png'"
						mode="aspectFill">
					</image>
				</view>
				<view class="name">
					<!-- 这里要联查 -->
					{{item.user.nickname ? item.user.nickname : item.user.username}}
				</view>
				<view class="time">
					<!-- 时间戳是long类型好吗 -->
					<uni-dateformat :date="item.publishDate" format="yyyy年MM月dd日" :threshold="[60000,3600000*24*30]">
					</uni-dateformat>
					<!-- 60000表示1min，是1000ms*60，3600000表示一小时 -->
				</view>
			</view>
		</view>
		<view class="body">
			<view class="title" @click="toDetail">{{item.title}}</view>
			<view class="text" @click="toDetail">
				<view class="t">
					<!-- 这个item就是我们传过来的每个item对象，对应字段要对应上 -->
					{{item.description}}
				</view>
			</view>
			<view class="piclist">
				<view class="pic" :class="item.picsUrl.length==1?'only':''" v-for="(pic,index) in item.picsUrl"
					:key="pic">
					<image @click="clickPic(index)" :src="pic" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<view class="info">
			<!-- 注意字段对应清楚 -->
			<view class="box"><text class="icon t-icon t-icon-liulan-copy"></text><text>{{item.viewCount}}</text>
			</view>
			<view class="box" @click="toDetail"><text class="icon t-icon t-icon-xiaoxi-copy"></text><text>
					{{item.commentCount ? item.commentCount : '评论'}}
				</text> </view>
			<view class="box" :class="item.like==false ? '': 'active'" @click="clickLike"><text
					:class="item.like==false? 'icon t-icon t-icon-dianzan-copy' : 'icon t-icon t-icon-dianzan' "></text><text>
					{{item.likeCount ? item.likeCount : '点赞'}}
				</text> </view>
		</view>
	</view>
</template>

<script>
	import {
		GetStroage,
	} from "../../utils/tool.js"
	export default {
		name: "post",
		props: { //接收组件
			item: { //默认对象
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				time: "",
				msgList: {
					type: "success",
					message: "获取验证码成功"
				}
			};
		},
		methods: {
			fillMsg(type, msg) { //提示消息的赋值
				this.msgList.type = type;
				this.msgList.message = msg;
				this.$refs.uToast.show({
					...this.msgList
				})
			},
			toDetail() {
				// console.log("跳转页面:" + '/pages_community/content/content?id=' + this.item.id);
				console.log("跳转参数:", this.item, "其发布日期时间戳为", this.item.publishDate);
				// console.log("时间戳处理后:", timeInterval(this.item.publishDate));
				// this.time = timeInterval(this.item.publishDate);
				let token = GetStroage("token");
				// console.log("----------token=", token);
				if (token) {
					uni.request({
						url: this.$e.Url + "/user/checkToken",
						data: {
							Token: token
						},
						header: {
							'Content-Type': 'application/json'
						},
						method: "GET",
						success: (res) => {
							console.log("请求API接口【/user/checkToken】", res);
							if (res.data.result == false) {
								this.fillMsg("error", "身份过期，请重新登录！");
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/login/login"
									})
								}, 1500)
							} else {
								uni.navigateTo({
									url: '/pages_community/content/content?id=' + this.item.id
								})
							}
						}
					})
				} else {
					this.fillMsg("error", "请先登录！");
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1500)
				}
			},
			clickLike() { //点赞逻辑
				//token验证
				let token = GetStroage("token");
				if (token) {
					uni.request({
						url: this.$e.Url + "/user/checkToken",
						data: {
							Token: token
						},
						header: {
							'Content-Type': 'application/json'
						},
						method: "GET",
						success: (res) => {
							console.log("请求API接口【/user/checkToken】", res);
							if (res.data.result == false) {
								this.fillMsg("error", "身份过期/异常，请重新登录！");
								setTimeout(() => {
									uni.navigateTo({
										url: "/pages/login/login"
									})
								}, 1500)
							} else { //验证成功
								uni.getStorage({
									key: "userInfo",
									success: (ans) => {
										let userid = ans.data.id;
										if (this.item.like) {
											uni.request({ //自减
												url: this.$e.Url + "/user/unLikePost",
												data: {
													uid: userid,
													postid: this.item.id
												},
												header: {
													'Content-Type': 'application/json',
													'Cookie': GetStroage("token")
												},
												method: 'DELETE',
												success: (res) => {
													console.log(
														"请求API接口【/user/unLikePost】",
														res);

													this.item.like = false;
													this.updatePostLike(this.item.id, -
														1);
													this.item.likeCount = this.item
														.likeCount -
														1; //数据双向绑定用于动态渲染
												}
											})
										} else {
											uni.request({ //自增
												url: this.$e.Url + "/user/likePost",
												data: {
													uid: userid,
													postid: this.item.id
												},
												withCredentials: true,
												header: {
													'Content-Type': 'application/json',
													'Cookie': GetStroage("token") //没用
												},
												method: 'POST',
												success: (res) => {
													console.log(
														"请求API接口【/user/likePost】",
														res);
													this.item.like = true;
													this.updatePostLike(this.item.id,
														1);
													this.item.likeCount = this.item
														.likeCount + 1;

												}
											})
										}
									}
								})
							}
						}
					})
				} else {
					this.fillMsg("error", "请先登录！");
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/login/login"
						})
					}, 1500)
				}

			},
			updatePostLike(id, num) { //改变帖子点赞数
				uni.request({
					url: this.$e.Url + "/user/updatePostLike",
					data: {
						id: id,
						num: num
					},
					header: {
						'Content-Type': 'application/json'
					},
					method: 'PUT',
					success: (res) => {
						console.log("请求API接口【/user/updatePostLike】", res);
					}
				})
			},
			//点击图片
			clickPic(index) {
				console.log('点击的图片url如下');
				console.log(this.item.picsUrl);
				uni.previewImage({
					urls: this.item.picsUrl, //需要预览的图片链接列表
					current: index
				})
			},
		}
	}
</script>

<style lang="scss">
	.root {
		padding: 15rpx;

		.head {
			display: flex;
			// font-size: 32rpx;
			align-items: center;
			justify-content: space-between; //两端对齐

			.userinfo {
				display: flex;
				align-items: center; //垂直居中

				.avatar {
					// background-color: red;
					width: 50rpx;
					height: 50rpx;


					image {
						width: 100%;
						height: 100%;
						border-radius: 9rpx;
						// display: block;
					}
				}

				.name {
					font-weight: bold;
					color: #222;
					padding-left: 10rpx;
					font-family: "楷体, Times New Roman";
				}

				.time {
					color: #888;
					font-size: 22rpx;
					padding-left: 20rpx;
				}

			}
		}

		.body {
			padding: 10rpx 0 0rpx;

			.title {
				font-family: "微软雅黑";
				font-size: 44rpx;
				color: #000;
				font-weight: bold;
				//多行省略号
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.text {
				padding: 10rpx 0;
				font-size: 30rpx;
				text-align: justify; //两端对齐

				.t {
					//
					color: #999;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden; //溢出隐藏
					text-overflow: ellipsis; //文本溢出显示省略号标记
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/*超出两行省略*/
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}

			.piclist {
				display: flex;
				padding-top: 10rpx;

				.pic {
					width: 225rpx;
					height: 225rpx;
					margin-right: 8rpx;
					overflow: hidden; //没他不会有圆角【隐藏溢出、清除浮动、解决坍塌】

					image {
						width: 100%;
						height: 100%;
					}

					&:first-child {
						//pic后面的第一个伪子元素
						border-radius: 20rpx 0 0 20rpx; //上下右左
					}

					&:last-child {
						border-radius: 0rpx 20rpx 20rpx 0rpx; //上下右左
					}

					&.only {
						border-radius: 20rpx; //上下右左
					}
				}
			}
		}

		.info {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #333;
			justify-content: space-around; //居中排列

			.box {
				display: flex;
				align-items: center;
				padding: 15rpx 0 15rpx;

				// flex: 1;
				.icon {}
			}

			.box.active {
				color: #5288F5;
			}
		}
	}
</style>
